<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 作用域插槽：父组件替换插槽的标签，但是内容由子组件提供 -->
    <!-- 举例：子组件中有一个数组：["西瓜","黄瓜","冬瓜","南瓜"]
               这个数组需要在多个页面展示：
               有的页面展示是垂直排列
               有的页面展示是水平排列
     -->

     <div id="app">
        <my-cpn>
            <!-- 3.获取slotProps -->
            <template slot-scope="slotProps">
                <!-- 4.通过 slotProps.data获取传过来的data数据-->
                <h1>{{slotProps.data}}</h1>

                <!-- 垂直展示数据 -->
                <ul>
                    <li v-for="item in slotProps.data">{{item}}</li>
                </ul>

                <!-- 水平展示数据 -->
                <div>
                    <span v-for="item in slotProps.data">{{item}}</span>
                </div>
            </template>
            

        </my-cpn>

     </div>
     <script src="./vue.js"></script>
     <template id="mycpn">
        <div>
            <!-- 2.在插槽中动态绑定数据 -->
            <slot :data="fruits">插槽的默认内容</slot>
        </div>
     </template>

     <script>
        Vue.component("my-cpn",{
            template:"#mycpn",
            // 1.在子组件中定义数据
            data(){
                return {
                    fruits:["西瓜","黄瓜","冬瓜","南瓜"]
                }
            }

        })
        let app=new Vue({
            el:"#app"
        })

     </script>
</body>
</html>